<template>
  <div id="column-manage-dialog">
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <span slot="title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="font-weight">专栏</el-breadcrumb-item>
          <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        </el-breadcrumb>
      </span>
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column label="文章标题">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleWatch(scope.row)">查看</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columnId: undefined,
      columnName: '',
      loading: false,
      dialogVisible: false,
      tableData: []
    }
  },
  methods: {
    showDialog(data) {
      this.columnId = data.columnId
      this.columnName = data.columnName
      this.getList()
      this.dialogVisible = true
    },
    handleWatch(row) {
      this.$router.push({ name: 'blog-details', params: { id: row.id } })
    },
    handleDelete(row) {
      this.$confirm(`确认从${this.columnName}专栏中移除【${row.title}】？`).then(() => {
        this.$ajax({
          url: this.$ajax.setUrl(`/column/${this.columnId}/${row.id}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.getList()
            // this.$message.success(data.data || data.msg)
            this.$emit('refresh')
            this.$message.success('删除成功')
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    getList() {
      this.$ajax({
        url: this.$ajax.setUrl(`/column/${this.columnId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.tableData = data.data.list || this.tableData
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
#column-manage-dialog {
  .font-weight {
    font-weight: bold;
  }
}
</style>
